<template>
	<view class="mod_price" :class="{ pline: line }" :style="{ 'line-height': priceFontSize, height: priceFontSize, color: color, margin: margin, alignItems: align, }">
		<i :style="{ 'font-size': unitFontSize }">¥</i>
		<view v-if="priceInteger != null" class="more2_info_price_txt" :style="{ 'font-size': priceFontSize }">
			{{ priceInteger }}
			<block v-if="priceDecimal != null">.</block>
			<text v-if="priceDecimal != null" :style="{ 'font-size': unitFontSize }">{{ priceDecimal }}</text>
			<view v-if="vipLevel > 0" class="vip-tag flex flex-row align-c justify-c">
				<text class="vip-level">V{{ vipLevel }}</text>
				<text class="vip-name">会员价</text>
			</view>
			<text v-if="unit && unit.length > 0" :style="{ 'font-weight': `${unitFontWeight}`, 'font-size': unitFontSize, 'margin-left': '6rpx', color: unitColor ? unitColor : color }">{{ unitStr }}</text>
			<span v-if="showOldPrice()" class="seckill_mod_goods_price_pre" :style="{ 'font-size': unitFontSize, color: oldColor }">
				<del>¥{{ $utils.formatPrice(oldPrice) }}{{ oldUnit ? oldUnit : '' }}</del>
			</span>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		margin: {
			type: String,
			default: '0rpx'
		},
		align: {
			type: String,
			default: 'flex-end'
		},
		color: {
			type: String,
			default: '#ff5722'
		},
		oldColor: {
			type: String,
			default: '#b2b2b2'
		},
		price: {
			type: [Number, String],
			default: 0
		},
		unit: {
			type: String,
			default: null
		},
		unitColor: {
			type: String,
			default: null
		},
		unitFontWeight: {
			type: [Number, String],
			default: 'bold'
		},
		oldUnit: {
			type: String,
			default: null
		},
		oldPrice: {
			type: [Number, String],
			default: null
		},
		priceFontSize: {
			type: String,
			default: '40rpx'
		},
		unitFontSize: {
			type: String,
			default: '20rpx'
		},
		cusUnit: {
			type: Boolean,
			default: false
		},
		line: {
			type: Boolean,
			default: false
		},
		vipLevel: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			priceInteger: null,
			priceDecimal: null,
			unitStr: null
		}
	},
	created() {
		this.unitStr = this.unit
		if (!this.cusUnit && this.unit && this.unit.indexOf('/') == -1) {
			this.unitStr = '/' + this.unit
		}
	},
	watch: {
		price: {
			handler(newVal, oldVal) {
				const vm = this
				if (newVal == null) {
					vm.priceInteger = `?`
					vm.priceDecimal = `??`
					return
				}
				let money = vm.$utils.formatPrice(newVal)
				if (Number(money) == 0) {
					vm.priceInteger = `0`
					vm.priceDecimal = `00`
					return
				}
				let arr = money.split('.')
				if (arr && arr.length == 2) {
					vm.priceInteger = arr[0]
					vm.priceDecimal = arr[1]
				} else {
					vm.priceInteger = money
					vm.priceDecimal = null
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		showOldPrice() {
			if (!this.oldPrice) {
				return
			}
			return Number(this.$utils.formatPrice(this.oldPrice)) > Number(this.$utils.formatPrice(this.price))
		}
	}
}
</script>

<style lang="scss">
.pline {
	text-decoration: line-through !important;
}

.mod_price {
	display: inline-flex;
	flex-direction: row;
	font-weight: bold;

	i {
		vertical-align: middle;
		font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
	}

	.more2_info_price_txt {
		margin-left: 6rpx;
		font-family: arial, sans-serif;
	}

	.seckill_mod_goods_price_pre {
		margin-left: 20rpx;
		font-weight: 400;
		display: inline-flex;
		del {
			text-decoration: line-through;
		}
	}

	.vip-tag {
		display: inline-flex;
		margin-left: 10rpx;
		background: #FDBE49;
		height: 26rpx;
		border-radius: 4rpx;
		overflow: hidden;
		position: relative;
		top: -4rpx;
		margin-right: 6rpx;

		.vip-level {
			font-size: 18rpx;
			color: #39803d;
			font-style: italic;
			padding-left: 6rpx;
		}

		.vip-name {
			font-size: 18rpx;
			font-weight: 400;
			background: #4caf50;
			color: #fff;
			padding: 0 6rpx;
			margin-left: 6rpx;
		}
	}
}
</style>
